<template>
  <div>
    <van-search
      v-model="value"
      placeholder="输入商品名称"
      shape="round"
      @click="goSearch"
    />
    <div class="titleList">
      <van-tabs v-model="active" @click="recommend(1)" color="#0C34BA" >
       <van-tab title="推荐">
          <div class="tuijianbox" v-for="(item, index) in TuijianList" :key="index" @click="viewProduct(item.pid)">
            <img :src="item.smallImg" alt="" class="tuijianImg" />
            <div class="namaBox">
              <p class="tuijianName">{{item.name}}</p>
              <span class="num">{{item.enname}}</span>
            </div>
            <i class="tuijianPrice">&yen;{{item.price}}</i>
          </div>
        </van-tab>
        <van-tab title="拿铁"><div class="tuijianbox" v-for="(item, index) in TuijianList" :key="index" @click="viewProduct(item.pid)">
          <img :src="item.smallImg" alt="" class="tuijianImg" />
          <div class="namaBox">
            <p class="tuijianName">{{item.name}}</p>
            <span class="num">{{item.enname}}</span>
          </div>
          <i class="tuijianPrice">&yen;{{item.price}}</i>
        </div></van-tab>
        <van-tab title="咖啡"><div class="tuijianbox" v-for="(item, index) in TuijianList" :key="index" @click="viewProduct(item.pid)">
          <img :src="item.smallImg" alt="" class="tuijianImg" />
          <div class="namaBox">
            <p class="tuijianName">{{item.name}}</p>
            <span class="num">{{item.enname}}</span>
          </div>
          <i class="tuijianPrice">&yen;{{item.price}}</i>
        </div></van-tab>
        <van-tab title="纳瑞冰"><div class="tuijianbox" v-for="(item, index) in TuijianList" :key="index" @click="viewProduct(item.pid)">
          <img :src="item.smallImg" alt="" class="tuijianImg" />
          <div class="namaBox">
            <p class="tuijianName">{{item.name}}</p>
            <span class="num">{{item.enname}}</span>
          </div>
          <i class="tuijianPrice">&yen;{{item.price}}</i>
        </div></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import "../assets/less/Menu.less";
export default {
  name: "Menu",
  data() {
    return {
      value: "",
      active: 2,
      TuijianList:"",
    };
  },
  methods: {
    goSearch() {
      this.$router.push({ name: "Search" });
    },
     recommend(e) {
        console.log(e);
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }
      
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: 'isHot',
          value: 'e'
        }
      })
        .then((res) => {
          console.log("res recommend ==> ", res);
          this.$toast.clear();

           if (res.data.code === 500) {
          this.TuijianList = res.data.result;
        } else {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000
          })
        }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    
    //查看商品详情
    viewProduct(pid) {
      this.$router.push({name: 'Detail', params: {pid}});
    },
     Nikname() {
      let tokenString = this.$cookies.get("tokenString");
      // console.log("tokenString ==> ", tokenString);

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          console.log("res Nikname ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "B001") {

            this.Mineoff=res.data.result[0].nickName;
            // console.log(this.Mineoff);

          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>